目录

前言 

开发思路

插件目录结构

弹窗页面

代码下载

最近要在百度网盘看视频，网上搜索到实现倍速播放的方法有不少：

Iphone/Ipad :下载ALook浏览器，在ALook浏览器中打开百度网盘播放视频就可以选择倍速播放。

PC端浏览器：chrome浏览器打开视频播放页面，F12进入开发者模式输入console命令：

videojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(2)；

但是这个命令目前已经用不了，原因是百度网盘播放页面不再引用videojs库。

受到上面这条console命令的启发，决定做一个chrome插件来调节播放速度，一劳永逸 !

chrome插件开发入门可以看这篇文章：

【干货】Chrome插件(扩展)开发全攻略 - 我是小茗同学 - 博客园我花了将近一个多月的时间断断续续写下这篇博文，并精心写下完整demo。本文所有涉及到的大部分代码均在这个demo里面 ，大家可以直接下载下来运行。另外，本文图片较多，且图片服务器带宽有限，右下角的目录https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

对于有开发经验的小伙伴，入门chrome插件开发是很容易的，接下来分享“百度网盘视频调速器”的开发过程：

分析百度网盘视频播放页面的HTML代码，找到video标签，利用插件的注入脚本来控制video标签速度属性。

 分析上面的代码，可以发现其用了attachShadow closed mode，在close模式下插件的js无法获取video标签对象，需要改为open mode，从而才能通过video更改播放速度。

 manifest.json是插件的配置文件，必须放在根目录。

向页面注入的脚本代码:

js/injected.js 

 js/shadowInjected.js

注意：shadowInject.js不能直接放在"content_scripts"中注入，而要通过injected.js引用，否则不能运行修改open mode的代码。

参考解释：javascript - Override Element.prototype.attachShadow using Chrome Extension - Stack Overflow

以上代码会在打开百度网盘网页时运行，查看页面代码时会发现，close变为open，接下来就可以改变video的播放速度了，为了使用方便，用弹窗的方式来设置速度。

popup.html 是插件的弹窗页面，点击安装好插件后，点击插件图标就会弹出如下图：

popup.html：

css/popup.css

js/popup.js